<template>
  <div class="m-order-detail">
    <!-- 订单状态 -->
    <div class="order-buyer-info">
      <div class="order-info">
        <div class="order-status">
          <div class="clearfix">
            <div class="icon-status fl">
              <img src="../../assets/dingdanzhuantai.png" alt="">
            </div>
            <div class="order-del">
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 21 || orderInfo.refundStatus == 0 || orderInfo.status == 0">订单状态：退款待审核</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 22 || orderInfo.refundStatus == 1 || orderInfo.status == 1">订单状态：退款审核中</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 23">订单状态：农商行部分退款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 25 || orderInfo.refundStatus == 2 || orderInfo.status == 2">订单状态：退款完毕</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 25 || orderInfo.refundStatus == 3 || orderInfo.status == 3">订单状态：退款失败</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 41">订单状态：申请退货</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 42">订单状态：退货审核中</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 45">订单状态：退货完毕</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 46">订单状态：退款及退货退款</h2>
              <span style="font-weight: bold">订单编号：{{orderInfo.order_id}}</span>
              <div style="font-weight: bold;margin-left: 18px;">
                退款金额：<span class="c-main">￥{{orderInfo.refund_price | currency}}</span>
              </div>
            </div>
          </div>

          <!-- 你可以进行的操作 -->
          <div class="buyer-options" v-if="orderInfo.storeSign || orderInfo.orderStatus == 21 || orderInfo.refundStatus == 0">
            你可以：
            <div class="btns-group">
              <w-button-group>
                <w-button type="option" class="free-look" v-if="orderInfo.storeSign" @click="signStatus = true">查看标记</w-button>
                <w-button type="option" style="width: 50px" 
                  @on-click="refundModal = true" 
                  v-if="(orderInfo.orderStatus == 21 || orderInfo.refundStatus == 0) && options">审核</w-button>
              </w-button-group>
            </div>
            <!-- <span class="t-under" @click="memorandum = true">商家备忘</span> -->
          </div>

          <!-- 你还可以进行的操作 -->
          <!-- <div class="buyer-options-other">
            您还可以：
            <span class="t-under btn-t" v-if="message && message != ''" @click="tipPanel = true">查看好下单提醒</span>
          </div> -->

        </div>
      </div>
    </div>

    <!-- 退款信息 -->
    <div class="refund-info">
      <w-mange-title title="退款信息"></w-mange-title>
      <div class="refund-del">
        <span>退款原因：{{orderInfo.userApplyReason}}</span>
        <div class="refund-cause">
          <span>退款说明：{{orderInfo.userApplyExplain}}</span>
        </div>
        <div style="margin-top: 8px;">
          <span style="vertical-align: top;">图片：</span>
          <div class="refund-imgs">
            <ul v-if="orderInfo.userApplyImg && orderInfo.userApplyImg.length">
              <li v-for="(img, imgIndex) in orderInfo.userApplyImg" :key="imgIndex">
                <a :href="img" target="_blank">
                  <img v-lazy="img" alt="">
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 卖家信息 -->
    <div>
      <w-mange-title title="卖家信息"></w-mange-title>
      <div class="store-info">
        <div>
          <span>店铺名称：{{orderInfo.store_name}}</span>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="orders">
      <div class="tab-bg">
        <w-table :columns="columns"></w-table>
      </div>
      
      <div class="order-lists">
        <table v-for="(goods, index) in goodsInfo" :key="index">
          <tr v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
            <td style="width: 39%">
              <div class="goods-info clearfix">
                <div class="goods-img fl">
                  <img v-lazy="goods.goods_mainphoto_path" alt="">
                </div>
                <div class="goods">
                  <p class="p-line-hide">{{goods.goods_name}} {{goods.goodsSerial}}</p>
                  <div class="sku">
                    <span>颜色</span>
                    <input type="text" :value="gsp.goodsSpecContent[0]">
                    <span>尺码</span>
                    <input type="text" :value="gsp.goodsSpecContent[1]">
                  </div>
                </div>
              </div>
            </td>
            <td style="width: 20%">¥{{gsp.goodsSinglePrice}}</td>
            <td style="width: 20%">{{gsp.count}}</td>
            <td style="width: 20%" :rowspan="gspLen" v-if="gspIndex == 0 && goods.reviseGoodsPrice != ''">{{(gsp.goodsSinglePrice - goods.reviseGoodsPrice)*goods.goodsTotalcount || 0 | currency}}</td>
            <td style="width: 20%" :rowspan="gspLen" v-if="gspIndex == 0 && goods.reviseGoodsPrice == ''">0</td>
          </tr>
        </table>
      </div>

      <!-- 订单结算 -->
      <!-- <div class="order-amount clearfix">
        <div class="fr">
          <div class="goods-all fl ">
            <span>商品总价： ¥{{orderInfo.goodsPrice | currency}}</span>
            <br>
            <span>店铺优惠： ¥{{orderInfo.subtrahendPrice || 0 | currency}}</span>
            <br>
            <span>运费： ¥{{orderInfo.shipPrice | currency}}</span>
          </div>
          <div class="order-all fr">
            <p>订单总价： ¥{{orderInfo.totalPrice | currency}}</p>
            <p>应收款：<span style="color: #C6000E">¥{{orderInfo.totalPrice | currency}}</span></p>
          </div>
        </div>
      </div> -->
    </div>

    <!-- 查看标记弹出框 -->
    <w-panel-fixed-wrap v-model="signStatus" title="标记备注" :show-btns="false" :panel-title="true" :show-close="true">
      <div class="sign-panel">
        <span style="vertical-align: top">标记备注：</span>
        <div class="remark">
          <p>{{orderInfo.storeSignInfo}}</p>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 商家备忘 -->
    <w-panel-validate :panel-title="memorandum" title="商家备忘" v-model="memorandum" :confirm-text="`提交`" @on-confirm="onConfirmDeliveryOptions(2)">
      <div class="m-confirm-delivery">
        <div class="delivery">
          <span class="title">订单编号</span>
          <div class="info">
            <w-input :validate="false" :disabled="true" v-model="orderInfo.orderId"></w-input>
          </div>
        </div>
        <div class="delivery">
          <span class="title" style="vertical-align: top;">备忘内容</span>
          <div class="info">
            <w-input type="textarea" holder="请输入" rule="isEmpty" error="请输入延长时间" v-model="storeMemorandum"></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 退款审核 -->
    <w-panel-fixed-wrap v-model="refundModal" title="退款审核" :width="`500px`" :confirm-text="`提交`" @on-confirm="onConfirmDeliveryOptions(5)">
      <div class="review-refund">
        <div>
          <span class="refund-title">订单金额：</span><span>{{orderInfo.totalPrice | currency}}元</span>
        </div>
        <div>
          <span class="refund-title">审核结果：</span>
          <w-radio :label="1" name="review" v-model="status">通过</w-radio>
          <w-radio :label="2" name="review" v-model="status">拒绝</w-radio>
        </div>
        <div>
          <span class="refund-title">订单编号：</span>
          <div class="refund-input">
            <w-input :disabled="true" v-model="orderInfo.orderId"></w-input>
          </div>
        </div>
        <div v-if="status == '2'">
          <span class="refund-title">原因：</span>
          <div class="refund-input">
            <textarea placeholder="请填写原因" v-model="auditFailReason"></textarea>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 查看好下单提醒 -->
    <w-panel-fixed-wrap v-model="tipPanel" :width="`357px`" :height="`308px`" :show-btns="false" title="好下单提醒" :panel-title="true" :show-close="true">
      <div class="tip-panel">
        <span>{{message}}</span>
      </div>
    </w-panel-fixed-wrap>

  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { apiOrderMange } from 'js/api'
import { session } from 'js/util'

export default {
  data() {
    return {
      tipPanel: false, // 查看好下单提醒
      columns: [
        {title: '货品', width: '40%'},
        {title: '单价', width: '20%'},
        {title: '数量', width: '20%'},
        {title: '优惠', width: '20%'}
      ],
      orderInfo: {},
      goodsInfo: [],
      gspLen: 0, // 每个商品的sku数量
      // 物流
      orderNo: '',
      deliveryType: '',
      business: '', // 物流名称
      // 备忘
      memorandum: false,
      storeMemorandum: '',
      goodsSku: {},
      signStatus: false, // 标记弹出框
      // 退款审核
      refundModal: false,
      status: 1, // 审核状态
      auditFailReason: '', // 退款审核内容
      message: '' // 提醒
    }
  },
  computed: {
    ...mapGetters(['token']),
    // 判断订单详情来源
    options() {
      if (this.$route.query.origin && this.$route.query.origin == 'fight') {
        return false
      }
      return true
    }
  },
  created() {
    this.fetchOrderInfo()
  },
  methods: {
    ...mapActions(['addBreads']),
    /**
     * 获取订单详情
     */
    fetchOrderInfo() {
      if (!this.$route.params.reid) return
      apiOrderMange.apiReOrderInfo(this.token, this.$route.params.reid).then(data => {
        this.orderInfo = data.bean || {}
        this.goodsInfo = JSON.parse(this.orderInfo.goodsInfo || '[]') // 获取商品信息
        // this.fetchRemindMessage()
        this.goodsInfo.forEach(goods => {
          this.$set(goods, 'reviseGoodsPrice', goods.reviseGoodsPrice || '')
          this.gspLen += goods.goodsGsp.length // 计算商品的sku个数
          goods.goodsGsp.forEach(gsp => {
            session.set('oldGsp', gsp.goodsSpecContent)
            this.$set(gsp, 'oldGoodsSpecContent', session.get('oldGsp'))
          })
        })
      })
    },
    /**
     * 获取好下单提醒
     */
    fetchRemindMessage() {
      apiOrderMange.apiRemindMessage(this.token, this.$route.params.orderid).then(data => {
        if (data.bean == null || data.bean == 'undefined') return
        this.message = data.bean.content || ''
      })
    },
    /**
     * 延长收货时间, 商家备忘，修改商品属性，审核退款
     */
    onConfirmDeliveryOptions(type) {
      const params = {
        accessToken: this.token,
        ofId: this.orderInfo.id,
        storeMemorandum: this.storeMemorandum, // 商家备忘
        status: this.status, // 审核结果
        reId: this.orderInfo.reId || '', // 审核id
        auditFailReason: this.auditFailReason, // 退款审核不通过原因
        type: parseInt(type)
      }
      if (type == 5 && this.status == '2' && this.auditFailReason == '') {
        this.$toast('请填写审核不通过原因')
        return
      }
      apiOrderMange.apiDeliveryGoodsFar(params).then(data => {
        this.$toast('操作成功', () => {
          this.fetchOrderInfo()
          this.memorandum = false
          this.refundModal = false
        })
      })
    }
  }
}
</script>

<style lang="scss">
.m-order-detail {
  .p-order-list {
    .w-input .error-tip {
      width: 100%
    }
  }
  .g-panel-fixed {
    .btn {
      width: 140px !important;
    }
  }
  .m-confirm-delivery {
    .w-input .error-tip {
      left: 0
    }
    .w-input, .select-container {
      width: 100%;
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.radio-consignor {
  display: inline-block;
  margin: 0 auto;
  width: 150px;
}
.m-change-gsp {
  .goods-info {
    width: 100%;
    padding: 10px;
    background:rgba(242,242,242,1);
    .img {
      width:60px;
      height:60px;
      margin-right: 10px;
    }
    .info {
      position: relative;
      width: 400px;
      height: 60px;
      display: inline-block;
      .goods-c {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        span {
          padding-right: 2%
        }
      }
    }
  }
  .sku-list {
    margin-top: 20px;
    .gsp {
      margin: 16px 0 16px 50px;
      .title {
        display: inline-block;
        vertical-align: top;
      }
      .sku {
        display: inline-block;
        width: 84%;
        white-space: pre-wrap;
        .span {
          padding: 4px 10px;
          border: 1px solid;
          border-radius: 8px;
          margin: 0 8px 8px 4px;
          display: inline-block;
          color: $color-disabled;
        }
      }
      .disabled {
        cursor: not-allowed;
      }
    }
  }
}
// 物流
.dev-info {
  .dev-title {
    border-bottom: 1px solid $border-gray-light;
    padding-bottom: 8px;
    span {
      font-weight: 600;
    }
  }
  // 物流时间轴
  .logistics {
    padding: 15px 0 20px 0;
    .time-group {
      margin-bottom: 14px;
      position: relative;
      &:first-child {
        &::before {
          background-image: url(../../assets/logistics-now.png);
        }
        .date-week {
          color: #FF6C00 !important;
        }
      }
      &:last-child {
        margin-bottom: 0;
        &::after {
          background-color: transparent;
        }
      }
      .time-number {
        width: 120px;
        text-align: center;
        padding: 0px 0px 12px 0px;
        
        .date {
          font-size: 12px;
          color: #9B9B9B;
          margin-bottom: 8px;
        }
        .date-week {
          color: #333333;
          font-size: 14px;
        }
        .week {
          margin-left: 8px;
        }

      }
      .logistics-info {
        position: relative;
        display: inline-block;
        margin: 8px 0 20px 50px;
        max-width: 550px;
      }

      &:after {
        content: "";
        display: block;
        position: absolute;
        height: calc(100% - 0px);
        width: 2px;
        top: 28px;
        left: 138px;
        background-color: #DDDDDD;
      }

      &:before {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        left: 130px;
        right: 20px;
        z-index: 10;
        background-image: url(../../assets/logistics-over.png);
        background-repeat: no-repeat;
      }
      .clear {
        clear: both;
        overflow: hidden;
      }
    }
  }
} 
// 发货后的订单列表样式
.delivery-list {
  font-size: 12px;
  .c-blue {
    color: #4A90E2;
    cursor: pointer;
    span {
      line-height: 22px;
    }
  }
  tbody {
    border-bottom: 1px solid #e4dfdf;
    &:last-child {
      border-bottom: none
    }
  }
}
.order-lists {
  border: 1px solid $border-gray-light;
  margin-top: 10px;
  margin-bottom: 20px;
  table {
    width: 100%;
    margin: 10px 0 10px 10px;
    td {
      text-align: center;
    }
  }
}
.t-under {
  text-decoration: underline;
  margin-right: 18px;
  font-size: 12px;
  cursor: pointer;
}
.btn-t {
  color: rgba(74,144,226,1);
}
// 订单流程
.process {
  width: 80%;
  position: relative;
  margin: 20px auto;
  .item-proce{
    text-align: center;
    background-color: $color-white;
  }
  .bg-c1{
    background-image: url('../../assets/order.png');
    background-repeat: no-repeat;
  }
  .bg-c2{
    background-image: url('../../assets/icon-greyEval.png');
    background-repeat: no-repeat;
  }
  // 未评价图片
  .bg-c3{
    background-image: url('../../assets/icon_lightprocess.png');
    background-repeat: no-repeat;
  }
  // 已评价
  .bg-c4{
    background-image: url('../../assets/icon-eval.png');
    background-repeat: no-repeat;
  }
  .order-img {
    width: 180px;
    height: 41px;
    margin: 8px 0 20px;
  }
  .f-l{
    float: left;
    .fontTitle {
      color: $color-dark;
    }
    .fontTime {
      font-size: 12px;
      color: $color-gray;
    }
  }
}
.order-buyer-info {
  width: 500px;
  margin: 20px auto 16px;
}
.btns-group {
  display: inline-block;
}
.buyer-info {
  width: 22%;
  padding: 0 15px;
  & > span {
    line-height: 22px;
    font-size: 12px;
    color: $color-dark;
  }
}
.buyer-title {
  vertical-align: text-top;
}
.order-info {
  .icon-status {
    display: inline-block;
    margin-right: 18px;
  }
  .order-del {
    margin-left: 8%;
    & > span {
      line-height: 22px;
    }
  }
  .order-status {
    // width: 70%;
    margin-left: 10%;
    // margin: 0 auto;
  }
}
.buyer-options {
  margin: 10px auto;
  .free-look {
    width: 120px;
  }
  .dev-look {
    width: 100px;
    margin-right: 16px;
  }
}
.buyer-options-other {
  .t-under {
    font-size: 14px !important
  }
}
.store-info {
  padding-left: 15px;
  font-size: 12px;
  & > div {
    display: inline-block;
    margin-right: 100px;
    margin-bottom: 4px;
  }
}
.after-b {
  &:after {
    content: '';
    padding-bottom: 4px;
    width: 1190px;
    position: absolute;
    border-bottom: 1px solid $border-gray-light
  }
}
.orders {
  margin-top: 18px;
}
.tab-bg {
  background-color: #f0f0f0;
  padding-left: 10px;
  table {
    border: none
  }
}
.goods-info {
  .goods-img {
    width: 88px;
    height: 88px;
    margin-right: 14px;
  }
  .goods {
    position: relative;
    text-align: left;
    height: 88px;
    font-size: 12px;
    p {
      font-weight: 500;
      margin-bottom: 10px
    }
    .sku {
      color: $color-dark;
    }
  }
  .update-sku {
    position: absolute;
    bottom: 0;
  }
}
.order-amount {
  border: 1px solid $border-gray-light;
  padding: 18px;
  margin-bottom: 20px;
  .goods-all {
    border-right: 1px solid $border-gray-light;
    padding-right: 48px;
    span {
      line-height: 22px;
      font-size: 12px;
    }
  }
  .order-all {
    font-size: 16px;
    padding-left: 48px;
    p {
      text-align: right;
      line-height: 34px;
    }
  }
}

.p-order-list {
  margin-top: 12px;
  table {
    width: 100%;
    tr {
      border: 1px solid $border-gray-light;
      td {
        height: 114px;
        text-align: center;
        &:nth-child(1) {
          width: 38%;
          padding: 10px;
        }
        &:nth-child(2) {
          width: 14%
        }
        &:nth-child(3) {
          width: 16%
        }
        &:nth-child(4) {
          width: 16%
        }
        &:nth-child(5) {
          width: 16%
        }
      }
    }
  }
  .goods-name {
    text-align: left;
  }
  .input-count {
    width: 72px;
    margin: 0 auto
  }
}
.m-price {
  margin-top: 20px;
  font-size: 12px;
  color: #222222;
  .price {
    width: 80px;
    display: inline-block;
  }
  .change {
    padding: 0 20px 0 10px;
  }
}
.refund-info {
  .refund-del {
    span {
      font-size: 12px;
    }
    .refund-imgs {
      display: inline-block;
    }
    .refund-cause {
      margin-left: 60px;
      display: inline-block;
    }
    ul {
      li {
        width: 46px;
        height: 46px;
        margin-right: 10px;
        display: inline-block;
      }
    }
  }
}
.tip-panel {
  width: 100%;
}
// 退款审核
.review-refund {
  margin-left: 30px;
  & > div {
    margin-bottom: 10px;
  }
  .refund-title {
    width: 80px;
    text-align: right;
    display: inline-block;
    vertical-align: top;
  }
  .refund-input {
    display: inline-block;
    width: 280px;
    textarea {
      background-color: transparent
    }
  }
}
</style>
